<template>
  <div class="dataScreen-container">
    <div ref="dataScreenRef" class="dataScreen">
      <div class="dataScreen-header">
        <div class="header-lf">
          <span
            class="header-screening"
            @click="router.push('/mock/news/list')"
            >新闻管理</span
          >
        </div>
        <div class="header-ct">
          <div class="header-ct-title">
            <span>尚品汇后台可视化数据展示</span>
          </div>
        </div>
        <div class="header-rg">
          <span
            class="header-download"
            @click="router.push('/mock/user/list')"
            >用户管理</span
          >
          <span class="header-time">当前时间：{{ time }}</span>
        </div>
      </div>
      <div>
        <TopView class="dataScreen-top"></TopView>
        <MiddleView></MiddleView>
        <BottomView></BottomView>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
export default {
  name: "Home",
};
</script>
<script lang="ts" setup name="dataScreen">
import { onMounted, ref, Ref, onBeforeUnmount } from "vue";
import TopView from "./components/TopView.vue";
import MiddleView from "./components/MiddleView.vue";
import BottomView from "./components/BottomView.vue";
import { useDataStore } from "@/stores/echartsData";
import { useTime } from "@/hooks/useTime";
import { useRouter } from "vue-router";
const dataStore = useDataStore();
const router = useRouter();

onMounted(() => {
  // 进行ws连接
  const ws = new WebSocket("ws://localhost:8000");
  ws.addEventListener("open", () => {
    console.log("ws open");
  });
  ws.addEventListener("message", (event) => {
    const wsData = JSON.parse(event.data);
    if (wsData.type === "update") {
      // 更新模式
      // 更新模式中是有key、value的
      Object.keys(wsData).forEach((item) => {
        // 在仓库中对数据进行更新操作，传递的是key、value
        dataStore.updateReportData(item, wsData[item]);
      });
    } else {
      dataStore.getReportData(JSON.parse(event.data));
    }
  });
  ws.addEventListener("close", () => {
    console.log("ws close");
  });
});

const dataScreenRef = ref<HTMLElement | null>(null);

onMounted(() => {
  // 初始化时为外层盒子加上缩放属性，防止刷新界面时就已经缩放
  if (dataScreenRef.value) {
    dataScreenRef.value.style.transform = `scale(${getScale()}) translate(-50%, -50%)`;
    dataScreenRef.value.style.width = `1920px`;
    dataScreenRef.value.style.height = `1080px`;
  }
  // // 初始化 echarts
  // initCharts();
  // 为浏览器绑定事件
  window.addEventListener("resize", resize);
});

// 根据浏览器大小推断缩放比例
const getScale = (width = 1920, height = 1080) => {
  let ww = window.innerWidth / width;
  let wh = window.innerHeight / height;
  return ww < wh ? ww : wh;
};

// 监听浏览器 resize 事件
const resize = () => {
  if (dataScreenRef.value) {
    dataScreenRef.value.style.transform = `scale(${getScale()}) translate(-50%, -50%)`;
  }
};

// 获取当前时间
const { nowTime } = useTime();
let timer: NodeJS.Timer | null = null;
let time: Ref<string> = ref(nowTime.value);
timer = setInterval(() => {
  time.value = useTime().nowTime.value;
}, 1000);

// 销毁时触发
onBeforeUnmount(() => {
  window.removeEventListener("resize", resize);
  clearInterval(timer!);
});
</script>

<style lang="scss" scoped>
@import "./index.scss";

:deep(.el-card) {
  background-color: rgba(255, 255, 255, 0);
  color: #05e8fe;
  // --el-card-border-color: #05e8fe;
  --el-card-border-color: none;
}
:deep(.el-menu) {
  // background-color: rgba(255, 255, 255, 0);
  // color: red;
  font-family: YouSheBiaoTiHei;
}
// :deep(.el-menu--horizontal > .el-menu-item) {
//   color: red;
// }
// :deep(.el-menu-item:not(.is-disabled):hover) {
//   background-color: blue;
// }
:deep(span.el-radio-button__inner) {
  background-color: rgba(255, 255, 255, 0);
  color: white;
}
:deep(.el-radio-button__original-radio:checked + .el-radio-button__inner) {
  color: #05e8fe;
  background-color: rgba(255, 255, 255, 0);
}
:deep(.el-date-editor) {
  background-color: rgba(255, 255, 255, 0);
  color: red;
}

:deep(input.el-range-input) {
  // background-color: rgba(255, 255, 255, 0.1);

  color: red !important;
}
</style>
